import React, { useState, useEffect, useMemo } from 'react';
import { Form, Input, Select, DatePicker, Checkbox, Radio, InputNumber, Cascader, Button, Space, Row, Col, type FormItemProps } from 'antd';
import type { FormInstance } from 'antd/lib/form';
import { DownOutlined, UpOutlined } from '@ant-design/icons'; // 引入展开图标
import './DynamicForm.model.css'; // 引入自定义样式文件
// 定义表单项接口
export interface FormItem {
  label: string;
  name: string;
  type:
  | "text"
  | "select"
  | "date"
  | "number"
  | "checkbox"
  | "radio"
  | "cascader"
  | "custom"
  | "remoteSelect";
  props?: Record<string, unknown>; // 传递给具体组件的属性
  options?: { label: string; value: string | number }[]; // 仅当 type 为 select, radio, checkbox 时使用
  rules?: Record<string, unknown>[]; // 校验规则
  customRender?: React.ReactNode; // 当 type 为 custom 时使用 可以通过这个属性传入自定义的Form组件
  wrapperCol?: { span?: number, offset?: number }; // 自定义表单项布局
  labelCol?: { span?: number, offset?: number }; // 自定义表单项布局
}

// 定义表单配置接口
export interface FormConfig {
  items: FormItem[];
  onSubmit: (values: Record<string, unknown>) => void;
  onReset?: () => void;
  labelWidth?: number;
  form?: FormInstance;
  collapsed?: boolean;
  submitText?: string;
  resetText?: string;
  layout?: 'inline' | 'horizontal' | 'vertical'; // 标签对齐方式
  defaultShowCount?: number; // 默认显示多少个表单项,其余的可以通过展开收起来控制
  onCollapseChange?: (collapsed: boolean) => void; // 折叠状态变化回调
  labelCol?: Record<string, unknown>; // 标签列宽度
  wrapperCol?: Record<string, unknown>; // 表单项列宽度
  itemsPerRow?: number; // 每行显示的表单项数量，默认为3
  actionColSpan?: number; // 操作按钮列宽度，默认为6
  searchBtn?: boolean; // 是否显示搜索按钮
  onValuesChange?: (values: Record<string, unknown>) => void; // 监听表单值变化回调
}

// Collapse.Panel 在当前版本中不需要显式解构
const { RangePicker } = DatePicker;

/**
 * 动态表单组件
 * 支持多种表单项类型，可配置展开/收起功能
 */
const DynamicForm: React.FC<FormConfig> = ({
  items,
  onSubmit,
  layout = 'horizontal', // 默认水平布局
  onReset,
  form: customForm,
  collapsed = false,
  submitText = '提交',
  resetText = '重置',
  defaultShowCount = 0,
  labelCol = undefined, // 标签列宽度
  wrapperCol = { span: 8 }, // 表单项列宽度
  itemsPerRow = 3, // 每行显示的表单项数量，默认为3
  actionColSpan = 8, // 操作按钮列宽度，默认为8（占满整行）
  searchBtn = true, // 是否显示搜索按钮
  onCollapseChange,
  onValuesChange, // 监听表单值变化回调
}) => {
  // 使用传入的form实例或创建新的form实例
  const [form] = Form.useForm(customForm);
  // 控制展开/收起状态
  const [isCollapsed, setIsCollapsed] = useState(collapsed);
  // 将defaultShowCount设为0时，默认显示所有表单项
  defaultShowCount = defaultShowCount === 0 ? items.length : defaultShowCount;
  // 监听折叠状态变化并通知父组件
  useEffect(() => {
    if (onCollapseChange) {
      onCollapseChange(isCollapsed);
    }
  }, [isCollapsed, onCollapseChange]);
  // 分割表单项为显示和隐藏两部分
  const { visibleItems, hiddenItems } = useMemo(() => {
    if (!items || items.length <= defaultShowCount) {
      return { visibleItems: items, hiddenItems: [] };
    }
    return {
      visibleItems: items.slice(0, defaultShowCount),
      hiddenItems: items.slice(defaultShowCount),
    };
  }, [items, defaultShowCount]);

  // 渲染单个表单项
  const renderFormItem = (item: FormItem) => {
    const { name, label, type, props, options, rules, customRender } = item;

    // 自定义组件渲染
    if (type === 'custom' && customRender) {
      return (
        <Form.Item  wrapperCol={{ span: 24 }} labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
          {customRender}
        </Form.Item>
      );
    }

    // 根据类型渲染不同的表单组件
    switch (type) {
      case 'text':
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            <Input {...props} style={{ width: '100%' }} />
          </Form.Item>
        );

      case 'select':
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            <Select options={options} {...props} style={{ width: '100%' }} />
          </Form.Item>
        );

      case 'date':
        // Ant Design v5中，DatePicker和RangePicker不需要额外的valueFormat
        // format属性已经可以控制显示和提交的格式
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            {props?.range ? (
              <RangePicker {...props} style={{ width: '100%' }} />
            ) : (
              <DatePicker {...props} style={{ width: '100%' }} />
            )}
          </Form.Item>
        );

      case 'number':
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            <InputNumber {...props} style={{ width: '100%' }} />
          </Form.Item>
        );

      case 'checkbox':
        if (props?.mode === 'multiple') {
          return (
            <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
              <Checkbox.Group options={options} {...props} />
            </Form.Item>
          );
        }
        // 移除Checkbox的children，因为Form.Item的label已经提供了标签
        const checkboxProps = { ...props };
        if (checkboxProps.label) {
          delete checkboxProps.label;
        }
        return (
          <Form.Item
            label={label}
            name={name}
            key={name}
            valuePropName="checked"
            rules={rules}
            wrapperCol={{ span: 24 }}
             labelCol={item.labelCol || undefined} 
          >
            <Checkbox {...checkboxProps} />
          </Form.Item>
        );

      case 'radio':
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            <Radio.Group options={options} {...props} />
          </Form.Item>
        );

      case 'cascader':
        return (
          <Form.Item wrapperCol={{ span: 24 }}  labelCol={item.labelCol || undefined}  label={label} name={name} key={name} rules={rules}>
            <Cascader options={options} {...props} style={{ width: '100%' }} />
          </Form.Item>
        );

      default:
        return null;
    }
  };

  // 处理表单提交
  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log('提交了:', items);
      setIsCollapsed(true);
      onSubmit(values);
    }).catch(info => {
      console.error('表单验证失败:', info);
    });
  };

  // 处理表单重置
  const handleReset = () => {
    form.resetFields();
    if (onReset) {
      onReset();
    }
  };

  // 根据配置的每行显示数量将表单项分组
  const groupItems = (itemsToGroup: FormItem[]) => {
    const groups = [];
    for (let i = 0; i < itemsToGroup.length; i += itemsPerRow) {
      groups.push(itemsToGroup.slice(i, i + itemsPerRow));
    }
    return groups;
  };

  // 根据每行显示数量计算列的响应式配置
  const getColProps = () => {
    // 根据itemsPerRow计算md屏幕下的列宽
    const mdSpan = Math.floor(24 / itemsPerRow);
    // 根据mdSpan计算sm屏幕下的列宽
    const smSpan = itemsPerRow <= 2 ? 12 : Math.floor(24 / Math.ceil(itemsPerRow / 2));

    return {
      xs: 24,
      sm: smSpan,
      md: mdSpan
    };
  };

  // 渲染一组表单项（一行itemsPerRow个）
  const renderItemGroup = (group: FormItem[]) => {
    const colProps = getColProps();

    return (
      <>
        {group.map((item) => (
          <Col {...(item.wrapperCol || colProps)}  key={item.name} >
            {renderFormItem(item)}
          </Col>
        ))}
      </>

    );
  };

  return (
    <div className="dynamic-form">
      <Form
        form={form}
        layout={layout}
        labelCol={labelCol}
        wrapperCol={wrapperCol}
        size="middle"
        onValuesChange={onValuesChange}
      >
        <Row gutter={16} key={Math.random()}>
          {/* 渲染可见的表单项组 */}
          {groupItems(visibleItems).map(renderItemGroup)}
          {/* 操作按钮 itemsPerRow === 1 ? 24 : (24 / itemsPerRow) * (itemsPerRow - defaultShowCount)*/}
          <Col span={actionColSpan} >
            {searchBtn && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Form.Item>
                <Space>
                  { onReset && <Button onClick={handleReset}>
                    {resetText}
                  </Button>}
                  <Button type="primary" onClick={handleSubmit}>
                    {submitText}
                  </Button>
                  {defaultShowCount !== items.length ? <Button type="link" style={{ color: 'var(--primary-color)', fontSize: '14px',padding:'0' }} onClick={() => { setIsCollapsed(!isCollapsed) }}>
                    {isCollapsed ? '展开' : '收起'}
                    {isCollapsed ? <DownOutlined style={{fontSize:'10px'}} /> : <UpOutlined style={{fontSize:'10px'}} />}
                  </Button> : null}
                </Space>
              </Form.Item>
            </div>}
            {!searchBtn && <Form.Item wrapperCol={{ span: 24 }}>
              <Button type="primary" style={{ width: '100%' }} onClick={handleSubmit}>
                {submitText}
              </Button>
            </Form.Item>}
          </Col>
          {/* 隐藏的表单项组 */}
          <Row style={{ display: isCollapsed ? 'none' : 'flex',margin:0,width:'100%' }} gutter={16}>
            {groupItems(hiddenItems).map(renderItemGroup)}
          </Row>
        </Row>
      </Form>
    </div>
  );
};

export default DynamicForm;